<template>
	<view class="pages-mine" v-if="mineInfo.id">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="我的" :color="color"
			:backgroundColor="color == '#ffffff' ?``:`#ffffff`">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>
		<block v-if="user_type == 1">
			<auth :needAuth="true" :must="true" class="pl-lg pr-lg pb-lg" v-if="userInfo && !userInfo.nickName"
				@go="$util.goUrl({url:`/pages/login?type=1`})">
				<view class="pl-lg flex-center">
					<image mode="aspectFill" lazy-load class="avatar radius"
						src="/static/image/mine/default-user.png">
					</image>
					<view class="flex-1 f-sm-title c-base text-bold ml-md">立即登录</view>
				</view>
			</auth>
			<view class="rel pt-md pl-lg pr-lg pb-lg flex-center" v-else>
				<image mode="aspectFill" lazy-load class="mt-md avatar radius" :src="userInfo.avatarUrl"></image>
				<view class="flex-1 ml-md">
					<view class="flex-center mb-lg">
						<view class="flex-1 flex-center f-lg-title c-base text-bold">
							<view class="mr-sm max-400 ellipsis">
								{{ userInfo.nickName || `用户${userInfo.id}` }}
							</view>
							<!-- #ifdef APP-PLUS -->
							<view class="flex-1"></view>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<i class="flex-1"></i>
							<!-- #endif -->
						</view>
						<view @tap.stop="$util.toCheckLogin({url:`/mine/pages/notice`})" class="notice-item rel">
							<view class="abs fill-warning radius" v-if="mineInfo.no_read_info"></view>
							<i class="iconfont icon-tongzhi c-base"></i>
						</view>
						<!-- #ifndef MP-WEIXIN -->
						<view @tap.stop="$util.toCheckLogin({url:`/mine/pages/setting`})" class="notice-item ml-md">
							<i class="iconfont icon-xitong text-bold c-base"></i>
						</view>
						<!-- #endif -->
					</view>
					<!--<view class="f-paragraph c-base" v-if="userInfo.phone"> {{userInfo.split_phone}} </view>-->
					
					
				<view class="abs member-item  pl-sm pr-sm fill-base flex-center">
					<image lazy-load class="vip-icon" src="/static/image/mine/vip-icon.png">
					</image>
					<view class="f-desc ellipsis" :style="{color:primaryColor}">
						{{mineInfo.id > 0 && mineInfo.member_title ? mineInfo.member_title :'普通会员'}}
					</view>
				</view>
					
				</view>
			</view>
		</block>

		<view class="pt-md pl-lg pr-lg pb-lg flex-center" v-if="user_type == 2">
			<image mode="aspectFill" lazy-load class="avatar radius" :src="farmer_info.cover">
			</image>
			<view class="flex-1 ml-md">
				<view class="f-lg-title c-base text-bold ellipsis" style="max-width: 520rpx;">{{farmer_info.title}}
				</view>
				<view class="flex-warp f-paragraph c-base">
					<i class="iconfont icon-dingwei mr-sm" style="font-size: 28rpx;margin-top: 6rpx;"></i>
					<view class="ellipsis-2" style="max-width: 490rpx;">{{farmer_info.address}}</view>
				</view>
			</view>
		</view>

		<!-- 普通用户-->
		<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
			@go="$util.toCheckLogin({url:`/mine/pages/balance/index`})" v-if="mineInfo.is_user">
			<view class="stored-item flex-center pd-lg mt-sm ml-md mr-md fill-base box-shadow radius-20">
				<view class="flex-1 mr-lg c-title">
					<view class="f-lg-title text-bold">{{mineInfo.balance || 0}}</view>
					<view class="f-caption c-caption">我的余额</view>
				</view>
				<view class="common-btn flex-center f-paragraph c-base radius" :style="{background:primaryColor}">
					立即充值
				</view>
			</view>
		</auth>

		<!-- 地主/农场主 -->
		<!-- balance 总金额，包含冻结资金 -->
		<view class="stored-list flex-center pd-lg mt-sm ml-md mr-md fill-base box-shadow radius-20"
			v-if="!mineInfo.is_user && user_type == 1">
			<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
				@go="$util.toCheckLogin({url:`/mine/pages/balance/index`})" class="stored-item">
				<view class="flex-center flex-column c-title">
					<view class="f-lg-title text-bold">{{mineInfo.balance}}</view>
					<view class="f-caption c-caption">我的余额</view>
				</view>
			</auth>
			<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
				@go="$util.toCheckLogin({url:`/mine/pages/balance/index`})" class="stored-item">
				<view class="flex-center flex-column c-title">
					<view class="f-lg-title text-bold">{{mineInfo.frozen_cash}}</view>
					<view class="f-caption c-caption">冻结资金</view>
				</view>
			</auth>
			<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
				@go="$util.toCheckLogin({url:`/shop/pages/integral/record`})" class="stored-item">
				<view class="flex-center flex-column c-title">
					<view class="f-lg-title text-bold">{{mineInfo.integral}}</view>
					<view class="f-caption c-caption">我的积分</view>
				</view>
			</auth>
		</view>

		<block v-if="user_type == 1">

			<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20">
				<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
					@go="$util.toCheckLogin({url:`/shop/pages/order/list`})" class="common-nav-title mb-lg">
					<view class="common-nav-title flex-center c-title pl-lg pr-md mb-lg b-1px-b">
						<view class="f-title text-bold flex-1">商城订单</view>
						<view class="f-caption flex-y-center">全部<i class="iconfont icon-right"></i></view>
					</view>
				</auth>
				<view class="flex-warp pb-lg">
					<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('shopOrderList', index)"
						v-for="(item, index) in shopOrderList" :key="index" class="item-child" style="width:20%">
						<view class="flex-center flex-column f-caption c-title">
							<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
							<view>{{ item.text }}</view>
						</view>
					</auth>
				</view>
			</view>

			<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20">
				<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
					<view class="f-title text-bold flex-1">农场管理</view>
				</view>
				<view class="flex-warp pb-lg">
					<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('toolList', index)"
						v-for="(item, index) in toolList" :key="index" class="item-child" style="width:20%">
						<view class="flex-center flex-column f-caption c-title">
							<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
							<view>{{ item.text }}</view>
						</view>
					</auth>
				</view>
			</view>

			<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20">
				<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
					<view class="f-title text-bold flex-1">其他功能</view>
				</view>
				<view class="flex-warp pb-lg">
					<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('otherList', index)"
						v-for="(item, index) in otherList" :key="index" class="item-child" style="width:20%">
						<view class="flex-center flex-column f-caption c-title">
							<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
							<view>{{ item.text }}</view>
						</view>
					</auth>
				</view>
			</view>

			<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20"
				v-if="mineInfo.is_landlord && businessList.length > 0">
				<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
					<view class="f-title text-bold flex-1">商家专属</view>
				</view>
				<view class="flex-warp pb-lg">
					<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('businessList', index)"
						v-for="(item, index) in businessList" :key="index" class="item-child" style="width:20%">
						<view class="flex-center flex-column f-caption c-title">
							<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
							<view>{{ item.text }}</view>
						</view>
					</auth>
				</view>
			</view>
		</block>

		<block v-if="user_type == 2">
			<view class="mine-menu-list rel ml-md mr-md fill-base box-shadow radius-20">
				<view class="cancel-auth iconfont icon-biaoqian c-warning flex-center abs"
					v-if="mineInfo.farmer_status == 3">
					<view class="text-bold f-icontext abs">取消授权</view>
				</view>
				<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
					<view class="f-title text-bold flex-1">订单管理</view>
				</view>
				<view class="flex-warp pb-lg">
					<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('orderList', index)"
						v-for="(item, index) in orderList" :key="index" class="item-child" style="width:20%">
						<view class="flex-center flex-column f-caption c-title">
							<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
							<view>{{ item.text }}</view>
						</view>
					</auth>
				</view>
			</view>
			<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20">
				<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
					<view class="f-title text-bold flex-1">其他功能</view>
				</view>
				<view class="flex-warp pb-lg">
					<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('manageList', index)"
						v-for="(item, index) in manageList" :key="index" class="item-child" style="width:20%">
						<view class="flex-center flex-column f-caption c-title">
							<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
							<view>{{ item.text }}</view>
						</view>
					</auth>
				</view>
			</view>
		</block>
		<view @tap.stop="toChange"
			class="mine-menu-list flex-between mt-md ml-md mr-md pr-md fill-base box-shadow radius-20"
			v-if="mineInfo.farmer_status == 2 || mineInfo.farmer_status == 3">
			<view class="common-nav-title flex-center c-title pl-lg">
				<view class="f-title text-bold flex-1">{{user_type == 1 ? '切换农场端' : '切换用户端'}}</view>
			</view>
			<i class="iconfont icon-right" style="font-size: 28rpx;"></i>
		</view>

		<view class="space-footer"></view>		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '#ffffff',
				// 商城订单
				shopOrderList: [{
					img: '/static/image/mine/no-pay.png',
					text: '待支付',
					url: '/shop/pages/order/list?tab=1'
				}, {
					img: '/static/image/mine/send.png',
					text: '待发货',
					url: '/shop/pages/order/list?tab=2'
				}, {
					img: '/static/image/mine/receiving.png',
					text: '待收货',
					url: '/shop/pages/order/list?tab=3'
				}, {
					img: '/static/image/mine/eval.png',
					text: '已完成',
					url: '/shop/pages/order/list?tab=4'
				}, {
					img: '/static/image/mine/refund.png',
					text: '售后/退款',
					url: '/shop/pages/refund/list'
				}],
				// 用户端 农场管理
				toolList: [{
					img: '/static/image/mine/land.png',
					text: '我的土地',
					url: '/land/pages/order/list'
				}, {
					img: '/static/image/mine/claim.png',
					text: '我的认养',
					url: '/claim/pages/order/list'
				}, {
					img: '/static/image/mine/monitor.png',
					text: '我的监控',
					url: '/home/pages/monitor/search'
				}, {
					img: '/static/image/mine/collage.png',
					text: '我的众筹',
					url: '/claim/pages/order/collage/list'
				}, {
					img: '/static/image/mine/evaluate.png',
					text: '我的评价',
					url: '/mine/pages/evaluate/list'
				}],
				// 用户端 其他功能
				otherList: [{
					img: '/static/image/mine/farm.png',
					text: '附近农场',
					url: '/home/pages/farm/list'
				}, {
					img: '/static/image/mine/coupon.png',
					text: '我的卡券',
					url: '/mine/pages/coupon/list'
				}, {
					img: '/static/image/mine/address.png',
					text: '我的地址',
					url: '/mine/pages/address/list'
				}, {
					img: '/static/image/mine/about.png',
					text: '关于我们',
					url: '/home/pages/about'
				}],
				// 用户端 商家专属
				businessList: [{
					img: '/static/image/mine/store-manage.png',
					text: '店铺管理',
					url: '/business/pages/store-manage'
				}, {
					img: '/static/image/mine/order.png',
					text: '商城订单',
					url: '/business/pages/order/list'
				}],
				// 农场端 其他
				orderList: [{
					img: '/static/image/mine/land.png',
					text: '土地订单',
					url: '/farmer/pages/order/land/list'
				}, {
					img: '/static/image/mine/claim.png',
					text: '认养订单',
					url: '/farmer/pages/order/claim/list'
				}, {
					img: '/static/image/mine/send-order.png',
					text: '配送订单',
					url: '/farmer/pages/order/distribution/list'
				}],
				// 农场端 其他功能
				manageList: [{
					img: '/static/image/mine/farm-manage.png',
					text: '农场管理',
					url: '/farmer/pages/apply?type=1'
				}, {
					img: '/static/image/mine/finance.png',
					text: '财务管理',
					url: '/farmer/pages/finance/index'
				}],
				farmer_info: {},
				user_type: 1
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			mineInfo: state => state.user.mineInfo,
			loginType: state => state.user.loginType,
		}),
		onShow() {
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onPageScroll(e) {
			let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
			if (this.color == color) return
			this.color = color
			this.$util.setNavigationBarColor({
				color,
				bg: 'none'
			});
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
					if (this.loginType == 'apple') {
						this.updateUserItem({
							key: 'isShowLogin',
							val: false
						})
					}
				}
				await this.getUserInfo()
				let [, farmer_info] = await Promise.all([this.getMineInfo(), this
					.$api.farmer.farmerInfo()
				])
				this.farmer_info = farmer_info
				let {
					farmer_status,
					fx_status
				} = this.mineInfo
				this.user_type = farmer_status == 2 || farmer_status == 3 ? this.user_type : 1
				let arr = ['farmer_status', 'fx_status']
				let textArr = {
					farmer_status: {
						text: '申请农场主',
						list: {
							img: '/static/image/mine/apply.png',
							text: '申请农场主',
							url: '/mine/pages/apply'
						}
					},
					fx_status: {
						text: '申请分销商',
						list: {
							img: '/static/image/mine/distribution.png',
							text: '申请分销商',
							url: '/mine/pages/distribution/apply'
						},
						list2: {
							img: '/static/image/mine/distribution.png',
							text: '分销中心',
							url: '/mine/pages/distribution/index'
						}
					}
				}
				arr.map(item => {
					if (this.mineInfo[item] != 2) {
						let arr = this.otherList.filter(aitem => {
							return aitem.text === textArr[item].text
						})
						if (arr.length === 0) {
							this.otherList.push(textArr[item].list)
						}
					} else {
						this.otherList.map((aitem, aindex) => {
							if (aitem.text === textArr[item].text) {
								this.otherList.splice(aindex, 1)
							}
						})
						if (item === 'fx_status') {
							let arr = this.otherList.filter(aitem => {
								return aitem.text === '分销中心'
							})
							if (arr.length === 0) {
								this.otherList.unshift(textArr[item].list2)
							}
						}
					}
				})
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex(true)
			},
			async getUserProfile() {
				// #ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: '用于完善个人资料',
					success: (res) => {
						console.log(res, "=======res")
						let {
							userInfo = {}
						} = res
						this.getAuthUserProfile(userInfo)
					},
					fail: (res) => {
						console.log(res, "=====fail");
					}
				})
				// #endif
			},
			async toJump(key, index) {
				let {
					url,
					text
				} = this[key][index]
				if (['申请农场主', '申请分销商'].includes(text)) {
					this.toApply(text == '申请农场主' ? 1 : 2)
					return
				}
				this.$util.log(url)
				this.$util.toCheckLogin({
					url
				})
			},
			// 申请农场主/分销商
			async toApply(type) {
				await this.getMineInfo()
				let {
					farmer_status = -1,
						fx_status = -1
				} = this.mineInfo
				let status = type == 1 ? farmer_status : fx_status
				// -1未申请，1审核中，2审核通过，3取消授权，4审核失败
				let url = status == -1 ? type == 1 ? `/farmer/pages/apply` : `/mine/pages/distribution/apply` :
					`/mine/pages/apply-result?type=${type}`
				this.$util.log(url)
				this.$util.toCheckLogin({
					url
				})
			},
			// 切换商家端
			toChange() {
				let {
					user_type
				} = this
				this.user_type = user_type == 1 ? 2 : 1
			}
		}
	}
</script>

<style lang="scss">
	.pages-mine {

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border: 4rpx solid #EFF3FD;
			transform: rotateZ(360deg);
		}

		.icon-shuaxin,
		.icon-erweima {
			font-size: 40rpx;
		}

		.member-item {
			width: 150rpx;
			height: 38rpx;
			margin-top: -20rpx;
			padding: 0 2rpx;
			border-radius: 6rpx;
			z-index: 1;


			.vip-icon {
				width: 28rpx;
				height: 24rpx;
				transform: scale(0.8);
			}

			.ellipsis {
				max-width: 120rpx;
				transform: scale(0.8);
			}

		}

		.notice-item {
			.iconfont {
				font-size: 46rpx;
			}

			.fill-warning {
				top: 6rpx;
				right: 6rpx;
				width: 10rpx;
				height: 10rpx;
			}
		}

		.stored-list {

			.stored-item {
				width: 33.33%;
			}
		}

		.mine-count-list {
			.cash-btn {
				width: 138rpx;
				height: 52rpx;
			}

			.icon-right {
				font-size: 28rpx;
			}
		}


		.mine-index-bg {
			background: rgb(57, 181, 74);
			height: 14.625rem;
			width: 100%;
			top: 0;
			border-radius: 0 0 5% 5%;
			z-index: -1;
		}


		.mine-menu-list {

			.cancel-auth {
				width: 110rpx;
				height: 100rpx;
				font-size: 100rpx;
				top: 10rpx;
				right: 20rpx;
				z-index: 1;

				.text-bold {
					height: 26rpx;
					transform: rotate(-32deg);
				}
			}


			.menu-title {
				height: 90rpx;

				.iconfont {
					font-size: 24rpx;
				}
			}

			.item-child {
				width: 20%;
				margin: 10rpx 0;

				.item-img {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 15rpx;
				}
			}
		}
	}
</style>
